<template>
  <div class="screen" v-loading="!loaded" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="screen__inner" v-if="loaded">
      <div class="screen-header">
        <div class="screen-header-datetime">
          <div class="screen-header-date">{{dateStr}}</div>
          <div class="screen-header-week">{{weekStr}}</div>
          <div class="screen-header-time">{{timeStr}}</div>
        </div>
        <div class="screen-header-title">{{ currData.大标题 }}</div>
        <div class="screen-header-btns">
          <div class="btn" :class="{'selected': item.id == currKey}" @click="onToggle(item)" v-for="(item, index) in dataList" :key="index">{{ item.title }}</div>
        </div>
      </div>
      <top-bars :data="currData.资产负债营收统计"></top-bars>

      <div class="screen-hr"></div>

      <div class="screen-main">
        <screen-left :data="currData.左侧面板"/>
        <screen-center :data="currData.中间面板"/>
        <screen-right :data="currData.右侧面板"/>
      </div>
    </div>
  </div>
</template>

<script>
import {postVisitListAllContent} from '$my/code/api/visit'

import date from '$ui/utils/date'
import topBars from '@/components/screen/top-bars'
import screenLeft from '@/components/screen/screen-left'
import screenCenter from '@/components/screen/screen-center'
import screenRight from '@/components/screen/screen-right'


const weeks = ['日', '一', '二', '三', '四', '五', '六']
export default {
  name: 'screen',
  components: {
    topBars,
    screenLeft,
    screenCenter,
    screenRight
  },
  data() {
    return {
      dateStr: '',
      weekStr: '',
      timeStr: '',
      loaded: false,
      currKey: '',
      dataList: [],
      currData: null
      /*
      currData: {
        大标题: '潜江市经济普查统计分析平台',
        资产负债营收统计: [
          {名称: '法人单位资产总计', 金额: 2.8, 单位: '亿元', 同比: 18, 是否增长: true},
          {名称: '法人单位负债总计', 金额: 2.8, 单位: '亿元', 同比: 18, 是否增长: true},
          {名称: '法人单位营业收入总计', 金额: 2.8, 单位: '亿元', 同比: 18, 是否增长: false}
        ],
        左侧面板: {
          标题: '第二产业',
          左上: {
            标题: '单位及从业人员情况',
            统计行: [
              {名称: '企业法人单位', 值: '1234', 单位: '个', 颜色: '#0adaf1'},
              {名称: '从业人员', 值: '2345', 单位: '人', 颜色: '#08e97f'}
            ],
            图表: [
              {name: '国有企业', value: 110},
              {name: '集体企业', value: 100},
              {name: '股份合作企业', value: 120},
              {name: '联营企业', value: 100},
              {name: '私营企业', value: 100},
              {name: '其他企业', value: 130},
              {name: '有限责任公司', value: 140},
              {name: '外商投资企业', value: 100},
              {name: '港、澳、台投资企业', value: 100},
              {name: '其他企业', value: 100}
            ]
          },
          左中: {
            标题: '经济指标',
            统计行: [
              {名称: '资产', 值: '23.56', 单位: '亿元', 颜色: '#ffd00a'},
              {名称: '负债', 值: '23.56', 单位: '亿元', 颜色: '#ee1f3a'},
              {名称: '营收', 值: '23.56', 单位: '亿元', 颜色: '#08e97f'}
            ],
            图表: {
              类型: ['资产', '负债', '营收'],
              颜色: ['#ffd00a', '#ee1f3a', '#08e97f'],
              列表: [
                ['采矿业', 100, 120, 130],
                ['制造业', 100, 120, 130],
                ['电力、热力、燃气及水生产和供应业', 100, 120, 130],
                ['建筑业', 100, 120, 130],
                ['批发和零售业', 100, 120, 130],
                ['住宿和餐饮业', 100, 120, 130],
                ['房地产业', 100, 120, 130],
                ['租赁和商务服务业', 100, 120, 130]
              ]
            }
          },
          左下: {
            标题: '主要产品产量情况',
            列表: [
              {名称: '纱', 值: '13.23', 单位: '万吨', 颜色: '#f90426'},
              {名称: '布', 值: '13.23', 单位: '万吨', 颜色: '#f9c604'},
              {名称: '化学纤维1', 值: '13.23', 单位: '万吨', 颜色: '#41ec04'},
              {名称: '化学纤维2', 值: '13.23', 单位: '万台', 颜色: '#a5d8e1'},
              {名称: '化学纤维3', 值: '13.23', 单位: '万台', 颜色: '#a5d8e1'},
              {名称: '化学纤维4', 值: '13.23', 单位: '万台', 颜色: '#a5d8e1'},
              {名称: '化学纤维5', 值: '13.23', 单位: '万台', 颜色: '#a5d8e1'},
              {名称: '化学纤维6', 值: '13.23', 单位: '万台', 颜色: '#a5d8e1'},
              {名称: '化学纤维7', 值: '13.23', 单位: '万台', 颜色: '#a5d8e1'}
            ]
          }
        },
        中间面板: {
          中上: [
            {名称: '企业法人', 值: '850', 单位: '个', 颜色: '#00fff5'},
            {名称: '机关、事业法人', 值: '850', 单位: '个', 颜色: '#00fff5'},
            {名称: '社会团体', 值: '850', 单位: '个', 颜色: '#00fff5'},
            {名称: '其他法人', 值: '850', 单位: '个', 颜色: '#00fff5'},
            {名称: '第二产业单位', 值: '850', 单位: '家', 颜色: '#0cff15'},
            {名称: '第三产业单位', 值: '850', 单位: '家', 颜色: '#0cff15'},
            {名称: '个体经营户', 值: '850', 单位: '家', 颜色: '#ffd736'}
          ],
          中中: [
            {地区: '园林办事处', 法人单位数: 11, 产业活动单位数: 10},
            {地区: '杨市办事处', 法人单位数: 12, 产业活动单位数: 10},
            {地区: '周矶办事处', 法人单位数: 13, 产业活动单位数: 10},
            {地区: '广华办事处', 法人单位数: 14, 产业活动单位数: 10},
            {地区: '泰丰办事处', 法人单位数: 15, 产业活动单位数: 10},
            {地区: '高场办事处', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '竹根滩镇', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '渔洋镇', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '王场镇', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '高石碑镇', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '熊口镇', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '老新镇', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '浩口镇', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '积玉口镇', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '张金镇', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '龙湾镇', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '江汉石油管理局', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '潜江经济开发区', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '周矶管理区', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '后湖管理区', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '熊口管理区', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '总口管理区', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '白鹭湖管理区', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '运粮湖管理区', 法人单位数: 10, 产业活动单位数: 10},
            {地区: '浩口原种场', 法人单位数: 10, 产业活动单位数: 10}
          ],
          中下: {
            标题: '新兴产业基本情况',
            表头: ['名称', 'R&D经费支出（亿元）', 'R&D经费与营业收入之比（%）'],
            内容: [
              ['文化、体育和娱乐业', '1.53', '3.56'],
              ['信息传输、软件和信息技术服务业', '1.53', '3.56'],
              ['科学研究和技术服务业', '1.53', '3.56'],
              ['水利、环境和公共设施管理业', '1.53', '3.56'],
              ['居民服务、修理和其他服务业', '1.53', '3.56'],
              ['金融业', '1.53', '3.56'],
              ['制造业', '1.53', '3.56'],
              ['电力、热力、燃气及水生产和供应业', '1.53', '3.56']
            ]
          }
        },
        右侧面板: {
          标题: '第三产业',
          右上: {
            标题: '企业法人单位、从业人员情况',
            统计行: [
              {名称: '企业法人单位', 值: '1526', 单位: '个', 颜色: '#f7ce00'},
              {名称: '从业人员', 值: '34212', 单位: '人', 颜色: '#01f8f9'}
            ],
            列表: {
              类型: ['企业法人单位', '从业人员统计'],
              颜色: ['#f7ce00', '#01f8f9'],
              列表: [
                ['国有企业', 100, 120],
                ['集体企业', 100, 120],
                ['股份合作企业', 100, 120],
                ['联营企业', 100, 180],
                ['股份有限公司', 100, 120],
                ['私营企业', 100, 120],
                ['其他内资企业', 100, 120],
                ['外商投资企业', 100, 120]
              ]
            },
            饼图: [
              {
                标题: '行业分布',
                列表: [
                  {name: '批发和零售业', value: 110},
                  {name: '租赁和商务服务业', value: 100},
                  {name: '建筑业', value: 110},
                  {name: '住宿和餐饮业', value: 100},
                  {name: '信息传输、软件和信息技术服务业', value: 110},
                  {name: '文化、体育和娱乐业', value: 100},
                  {name: '交通运输、仓储和邮政业', value: 110},
                  {name: '农、林、牧、渔业', value: 100},
                  {name: '居民服务、修理和其他服务业', value: 100},
                  {name: '制造业', value: 100}
                ]
              },
              {
                标题: '人员分布',
                列表: [
                  {name: '批发和零售业', value: 888},
                  {name: '租赁和商务服务业', value: 999},
                  {name: '建筑业', value: 111},
                  {name: '住宿和餐饮业', value: 222},
                  {name: '信息传输、软件和信息技术服务业', value: 333},
                  {name: '文化、体育和娱乐业', value: 444},
                  {name: '交通运输、仓储和邮政业', value: 555},
                  {name: '农、林、牧、渔业', value: 666},
                  {name: '居民服务、修理和其他服务业', value: 777},
                  {name: '制造业', value: 1011}
                ]
              }
            ]
          },
          右下: {
            标题: '经济指标',
            统计行: [
              {名称: '资产', 值: '23.1', 单位: '亿元', 颜色: '#ffd00a'},
              {名称: '负债', 值: '23.2', 单位: '亿元', 颜色: '#ee1f3a'},
              {名称: '营收', 值: '23.3', 单位: '亿元', 颜色: '#08e97f'}
            ],
            图表: {
              类型: ['资产', '负债', '营收'],
              颜色: ['#ffd00a', '#ee1f3a', '#08e97f'],
              列表: [
                ['采矿业', 100, 120, 130],
                ['制造业', 100, 120, 130],
                ['电力、热力、燃气及水生产和供应业', 100, 120, 130],
                ['建筑业', 100, 120, 130],
                ['批发和零售业', 100, 120, 130],
                ['住宿和餐饮业', 100, 120, 130],
                ['房地产业', 100, 120, 130],
                ['租赁和商务服务业', 100, 120, 130]
              ]
            }
          }
        }
      }
      */
    }
  },
  methods: {
    async init() {
      const query = this.$route.query
      if(query && query.c) {
        this.currKey = Number(query.c)
      }

      this.initTimer()
      await this.loadAll()

      // this.loaded = true
      this.buildData()
    },
    async loadAll() {
      const res = await postVisitListAllContent({})
      this.dataList = res || []

      if(!this.currKey) {
        this.currKey = res[0].id
      }
    },
    initTimer() {
      if(this.timer != null) {
        window.clearInterval(this.timer)
      }
      const now = new Date()
      this.dateStr = date(now, 'yyyy年MM月dd日')
      const day = now.getDay();

      this.weekStr = '星期' + weeks[day]

      this.timer = setInterval(() => {
        this.timeStr = date(new Date(), 'hh:mm')
      }, 1000)
    },
    onToggle(item) {
      if(this.currKey === item.id) {
        return
      }
      this.currKey = item.id

      this.loaded = false
      setTimeout(_ => {
        this.buildData()
      }, 300)


    },
    buildData() {
      const find = this.dataList.find(o => o.id === this.currKey)
      const content = find.content

      if(!content) {
        this.$alert('没有大屏数据!')
        return
      }
      let json = {}
      try {
        json = JSON.parse(content)
      } catch (e) {
        console.error(e)
      }
      this.loaded = true
      this.currData = json
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="scss">
.screen {
  font-size: 16px;
  color: #fff;
  position: relative;
  height: 100%;
  width: 100%;

  &__inner {
    color: #fff;
    position: relative;
    height: 100%;
    width: 100%;
    background: url("~@/assets/qianjiang/bg.jpg") no-repeat ;
    background-size: 100% 100%;
    background-color: #010c3f;
  }

  &-header {
    position: relative;
    width: 100%;
    height: 90px;
    background: url("~@/assets/qianjiang/header.png") no-repeat top/100% 100%;

    &-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 13.5%;
      background: linear-gradient(180deg, #ffffff 0%, #FFF 35%, #02eafb 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-size: 44px;
      font-weight: bold;
      line-height: 1;
      letter-spacing: 3px;
    }

    &-datetime {
      position: absolute;
      display: flex;
      font-size: 20px;
      top: 40%;
      left: 3%;
    }
    &-date {
    }
    &-week {
      margin: 0 20px 0 10px;
    }
    &-time {
    }

    &-btns {
      display: flex;
      position: absolute;
      width: 24%;
      right: 5%;
      top: 30%;
      justify-content: center;

      .btn {
        width: 126px;
        height: 43px;
        background: url("~@/assets/qianjiang/btn.png") no-repeat ;
        background-size: 100%;
        text-align: center;
        padding-top: 10px;
        color:#04d6ec;

        &:hover, &.selected, &:active {
          color: #FFF;
          background: url("~@/assets/qianjiang/btn-on.png") no-repeat ;
        }

        & + .btn {
          margin-left: 6%;
        }
      }
    }

  }

  &-hr {
    width: 42.6%;
    position: absolute;
    left: 50%;
    top: 13.88%;
    transform: translateX(-50%);
    height: 2px;
    background: url("~@/assets/qianjiang/line-hr.png") no-repeat top/100% 100%;
  }

  &-main {
    position: absolute;
    top: 11%;
    bottom: 3.7%;
    left: 1%;
    right: 1%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
